<template>
    <!-- 有子菜单的情况 -->
    <el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.path">
        <template #title>
            <el-icon v-if="menu.icon">
                <component :is="menu.icon" />
            </el-icon>
            <span class="menu-text" v-show="!isCollapse">{{ menu.menuName }}</span>
        </template>
        <menu-item 
            v-for="child in menu.children" 
            :key="child.id" 
            :menu="child" 
            :is-collapse="isCollapse" 
        />
    </el-sub-menu>
    
    <!-- 没有子菜单的情况 -->
    <el-menu-item v-else :index="menu.path">
        <el-icon v-if="menu.icon">
            <component :is="menu.icon" />
        </el-icon>
        <span class="menu-text" v-show="!isCollapse">{{ menu.menuName }}</span>
    </el-menu-item>
</template>

<script setup>
defineProps({
    menu: {
        type: Object,
        required: true
    },
    isCollapse: {
        type: Boolean,
        default: false
    }
})
</script>

<style scoped>
.menu-text {
    display: inline-block;
    transition: opacity 0.2s, width 0.2s;
    white-space: nowrap;
    vertical-align: middle;
}
.menu-text[style*="display: none"] {
    opacity: 0;
    width: 0;
    overflow: hidden;
}
</style> 